<template>
  <el-dialog v-model="dialogVisible" class="box" width="30%">
    <img w-full :src="dialogImageUrl" class="previewImg" />
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const dialogVisible = ref(false)
  const dialogImageUrl = ref('')

  // 打开
  const open = (url = '') => {
    dialogVisible.value = true
    dialogImageUrl.value = url
  }
  // 关闭
  const close = () => {
    dialogVisible.value = false
    dialogImageUrl.value = ''
  }

  // 组件实例
  defineExpose({
    open,
    close,
  })
</script>

<style lang="scss" scoped>
  .box {
    overflow: auto;
  }

  .previewImg {
    scale: 0.7;
    object-fit: fill;
  }
</style>
